.fixed-footer {
    position:static;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    transform: scale(1.2);
    font-size: 0.8em;
}

a:link {
    color:red;
    text-decoration:none;
}
a:visited {
    color:blueviolet;
    text-decoration:none;
}
a:hover {
    color:rgba(255, 0, 0, 0.5);
    text-decoration:none;
}
a:active {
    color:green;
    text-decoration:none;
}

.container {  
    display: grid;
    grid-template-columns: 2em 18em 10em;
     grid-template-rows: 10em 5em 15em;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "number_check add add"
        "number_check add add"
        "number_check minus minus";
    }

.container {  display: grid;
    grid-template-columns: 0.4fr 1.6fr 1fr;
     grid-template-rows: 1fr 0.5fr 1.5fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "number_check add add"
        "number_check add add"
        "number_check minus minus";
        font-size: 1.2em;
    }

.number_check { grid-area: number_check; }

.add { grid-area: add; }

.minus { grid-area: minus; }

.number_check
{
    background-color:white;
    font-family: monospace;  /* 等宽字体 */
}
.add
{
    background-color:#afffb0;
    font-family: monospace;  /* 等宽字体 */

}
.minus
{
    background-color:#ffafaf;
    font-family: monospace;  /* 等宽字体 */
}

.submit_button
{
    text-align:center;
}

@media (min-width: 1023px) {
    .container {  display: grid;
        grid-template-columns: 0.2fr 1.8fr 1fr;
         grid-template-rows: 1fr 0.5fr 1.5fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "number_check add add"
            "number_check add add"
            "number_check minus minus";
            font-size: 1em;
        }
}